<template>
    <div class="prd-sort">
        <!--<div class="flex-cell">-->
            <!--<div  class="sort-item text-center" :class="{'sort-active':activeText==1}" @click="sortSelect(1)">-->
                <!--<span>综合</span>-->
            <!--</div>-->
            <!--<div  class="sort-item text-center" :class="{'sort-active':activeText==2}" @click="sortSelect(2)">-->
                <!--<span>销量</span>-->
            <!--</div>-->
            <!--<div  class="sort-item text-center" :class="{'sort-active':activeText==3}" @click="sortSelect(3)">-->
                <!--<span>价格</span>-->
                <!--<span class="iconfont icon-sort" :class="{'iconfont-jiantouxia':priceSort,'iconfont-jiantoushang':!priceSort}"></span>-->
            <!--</div>      -->
        <!--</div>   -->
        <div  class="flex-cell filter ">

            <div  class="sort-item text-center"  v-show="brandList.length!=0">
                <span :class="{'sort-title':activeDrop==1}" @click="selectMore(1)">{{selectTitle.brand}}</span>
                <div class="select-box"  :class="{'select-open':activeDrop==1}">
                    <ul  class="select-content clear-both">
                        <li v-for="item in brandList">
                            <div :class="{'active-text':item.checked}" v-model="item.checked" @click="selectBrand(item)">{{item.name}}</div>
                        </li>
                    </ul>
                    <div class="drop-btn ">
                        <div class="reset">重置</div>
                      <!--     <div class="select-btn">确定</div> -->
                    </div>
                </div>
            </div>

            <div  class="sort-item text-center" v-show="priceSetList.length!=0">
                <span :class="{'sort-title':activeDrop==2}" @click="selectMore(2)">{{selectTitle.priceSet}}</span>
                <div class="select-box"  :class="{'select-open':activeDrop==2}">
                    <ul  class="select-content clear-both">
                        <li v-for="item in priceSetList">
                            <div :class="{'active-text':item.checked}" v-model="item.checked" @click="selectPrice(item)">{{item.min}}~{{item.max}}</div>
                        </li>
                    </ul>
                    <div class="drop-btn ">
                        <div class="reset">重置</div>
                    <!--    <div class="select-btn">确定</div>  -->
                    </div>
                </div>
            </div>
            <div  class="sort-item text-center sort-active"  @click="sortSelect()">
                <p>
                 <a>价格</a>
                <i class="iconfont icon-sort" :class="{'iconfont-jiantouxia':activeText,'iconfont-jiantoushang':!activeText}"></i>
                </p>
            </div>
        </div>
    </div>

</template>

<script>

export default {
    name:'flexCell',
    props:{
        selectTitle:{
            type:Object,
            default:{}
        },
        brandList:{
            type:Array,
            default:[]
        },
        priceSetList:{
            type:Array,
            default:[]
        }
    },
    data(){
        return {
            // priceSort:false,
            activeText:false,
            activeDrop:0
        }
    },
    methods:{
        sortSelect (){
            this.activeText=!this.activeText
            this.$emit('sort',this.activeText)
        },
        selectMore(val){
            if(val==this.activeDrop){
                this.activeDrop=0
            }else{
                this.activeDrop=val
            }
        },
        //选择品牌
        selectBrand(item){
            this.$emit('select',item,'brand') 
            this.activeDrop=0   //收起下拉
        },
        //选择价格
        selectPrice(item){
            this.$emit('select',item,'price')
            this.activeDrop=0   //收起下拉
        }   
    }
}
</script>


<style scoped lang="scss">
.prd-sort{
    .flex-cell{
        display:flex;
        background:#fff;
        border-top:.013333rem solid #ececec;
        border-bottom:.013333rem solid #ececec;
        .sort-item{
            flex:1;
            height:1.066667rem;
            line-height:1.066667rem;
            color:#666;
            .icon-sort{
                font-size:.3rem;
            }
        }
        .sort-active{
            color:#e4393c;
        }
        &:first-child{
            border-bottom:0;
        }
    }
    .filter{
        position: relative;
        padding:.133333rem 0;
        z-index:20;
        .sort-item{
            height:.866667rem;
            line-height:.866667rem;
            span{
                display:block;
                max-width:2.533333rem;
                margin:auto;
                border:.013333rem solid #ededed;
                border-radius:5px;
                background:#fefefe;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .sort-title{
                color:#e4393c;
                border-bottom:0;
                font-size:.4rem;
                padding-bottom:.12rem;
                background:#fcfcfc;
                border-bottom-left-radius:0;
                border-bottom-right-radius:0;
            }
            .select-box{
                position:fixed;
                
                left:0;
                right:0;
                width:100%;
                max-height:0;
                overflow:hidden;
                transition: max-height, .1s ease-in-out;
                .select-content{
                    overflow:auto;
                    width:100%;
                    max-height:6rem;
                    padding:.133333rem ;
                    box-sizing: border-box;
                    background:#fcfcfc;
                    li{
                        float:left;
                        width:50%;
                        padding:.133333rem 0;
                        div{
                            width:90%;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        .active-text{
                            color:#e4393c;
                            font-size:.4rem;
                        }
                    }
                }
                .drop-btn{
                    display:flex;
                    .reset,.select-btn{
                        flex:1;
                        border-top:.013333rem solid #ccc;
                        border-bottom:.013333rem solid #ccc;
                        padding:.08rem;
                        &:active{
                            width:100%;
                            height:100%;
                            background:rgba(51,51,51,.6);
                            content:'';
                        }
                    }
                    .reset{
                        background:#fff;
                        color:#e4393c;
                        border-right:.013333rem solid #ececec;
                    }
                    .select-btn{
                        background:#e4393c;
                        color:#fff;
                    }
                }
            }
            .select-open {
                overflow:hidden;
                max-height:7.066667rem;
                background:#fff;
                transition: max-height, .1s ease-in-out;
            }
        }
    }
}


</style>
